<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    li {
      list-style: none;
    }
    ul {
      padding: 0;
      margin: 0;
    }
    .swiper {
      width: 600px;
      height: 308px;
      position: relative;
      overflow: hidden;
      margin: auto;
    }
    .swiper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: none;
      opacity: 0;
      animation: fadeShow 2s both;
    }
    .swiper_content img.content_active {
      display: block;
    }
    /* 箭头 */
    .swiper_arrow {
      position: absolute;
      width: 40px;
      /* 向上移动自己的一半 */
      transform: translateY(-50%);
      top: 50%;
      font-size: 28px;
      background-color: lightgray;
      text-align: center;
      cursor: pointer;
      border-radius: 50%;
    }
    .swiper_arrow_left {
      left: 12px;
    }
    .swiper_arrow_right {
      right: 12px;
    }
    /* 指示器 */
    .swiper_indicator {
      /* width: 100%; */
      /* background-color: gray; */
      height: 10px;
      position: absolute;
      /* display: flex;
      justify-content: center; */
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
    .swiper_indicator ul {
      display: flex;
      gap: 6px;
    }
    .swiper_indicator ul li {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      cursor: pointer;
      background-color: white;
    }
    .indicator_active {
      background-color: red;
    }

    /* 图片显示动画  */
    @keyframes fadeShow {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
  </style>
  <body>
    <div class="swiper">
      <div class="swiper_content">
        <img class="content_active" src="images/1.png" />
        <img src="images/2.png" />
        <img src="images/3.png" />
        <img src="images/4.png" />
        <img src="images/5.png" />
        <img src="images/6.png" />
        <img src="images/7.png" />
      </div>
      <div class="swiper_arrow swiper_arrow_left">❮</div>
      <div class="swiper_arrow swiper_arrow_right">❯</div>
      <div class="swiper_indicator">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
    </div>
  </body>
  <script src="jquery.min.js"></script>
  <script>
    // 设置指示器状态
    function setIndicator(curIndex) {
      $(".swiper_indicator>ul").find("li").css("background-color", "white");
      $(".swiper_indicator>ul")
        .find("li")
        .eq(curIndex)
        .css("background-color", "red");
    }
    // 指示器绑定点击事件
    function bindIndicatorClickEvent() {
      var tabArr = $(".swiper_indicator>ul").find("li");
      for (var i = 0; i < tabArr.length; i++) {
        $(tabArr[i]).bind("click", { index: i }, clickHandler);
      }
      function clickHandler(event) {
        var i = event.data.index;
        setIndicator(i);
        setSwiperContent(i);
      }
    }
    // 设置slide内容
    function setSwiperContent(curIndex) {
      $(".swiper_content").find("img").removeClass("content_active");
      $(".swiper_content").find("img").eq(curIndex).addClass("content_active");
    }
    // 总的轮播图数量
    let totalSlide = 0;
    // 当前轮播图下标
    let cur = 0;

    // 绑定pre,next鼠标点击事件
    $(".swiper_arrow").on("click", function (event) {
      let arrow = $(this).hasClass("swiper_arrow_left");
      if (arrow) {
        cur = cur == 0 ? totalSlide - 1 : cur - 1;
      } else {
        cur = cur == totalSlide - 1 ? 0 : cur + 1;
      }
      setIndicator(cur);
      setSwiperContent(cur);
    });

    // 相当于onload里的
    $(function () {
      // 在这里添加你的代码
      totalSlide = $(".swiper_content").find("img").length;
      setIndicator(cur);
      setSwiperContent(cur);
      bindIndicatorClickEvent();
    });
  </script>
</html>
